import { ConfigTable } from '../../../components/ConfigTable.mdx';
import { Callout } from 'nextra/components';

# `cosmos.config.json`

The Cosmos config is a **JSON** file, so it can only contain serializable
values. This design decision is meant to discourage complex configuration,
make it easy to embed config options into the Cosmos UI, and enable visual
config editing.

## Config Schema

You can enhance your Cosmos config with autocomplete in code editors like VS Code.

```jsonc filename="cosmos.config.json"
{
  "$schema": "http://json.schemastore.org/cosmos-config",
  // your options...
}
```

And if you use VS Code you can map the Cosmos config schema globally by [extending your user settings](https://code.visualstudio.com/docs/languages/json#_mapping-in-the-user-settings).

```json
"json.schemas": [
  {
    "fileMatch": ["cosmos.config.json"],
    "url": "http://json.schemastore.org/cosmos-config"
  }
]
```

Alternatively, you can reference the local Cosmos config schema in your workspace configuration.

```json
"json.schemas": [
  {
    "fileMatch": ["cosmos.config.json"],
    "url": "./node_modules/react-cosmos/config.schema.json"
  }
]
```

## Config Options

<Callout type="info">
  To understand the Cosmos config options in more detail see
  [config.schema.json](https://github.com/react-cosmos/react-cosmos/blob/main/packages/react-cosmos/config.schema.json).
</Callout>

<ConfigTable />
